<template>
  <div class="div_sty">
    <el-row>
      <el-col :span="20">
        <div class="container">
          <div>
            <p style="color: red">:对订单的退换货操作仅能选择退换货一种模式,诺需要切换请将退换货单的产品全部撤回</p>
          </div>
          <el-tabs v-model="message">
            <el-tab-pane :label="`订单详情(${productList.length})`" name="first" class="tabpan">
              <el-table
                :data="productList"
                border
                style="width: 100%"
                ref="multipleTable"
              >
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  fixed
                  prop="detPrid"
                  label="产品编号"
                  width="150">
                </el-table-column>

                <el-table-column
                  prop="prName"
                  label="产品名称"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="prsPrice"
                  label="订单售价"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="speColor"
                  label="型号"
                  width="300">
                </el-table-column>
                <el-table-column
                  prop="exchangeState"
                  label="发货数量"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="returnState"
                  label="可退数量"
                  width="120">
                </el-table-column>
              </el-table>

              <div class="handle-row">
                <el-button type="warning" @click="exchange" :disabled="returnstate?false:'disabled'" >换货</el-button>
                <span v-if="this.orderState==0">
                                  <el-button type="danger" @click="returnGoods"  :disabled="exchangeState?false:'disabled'" >退货</el-button>
                </span>
              </div>



            </el-tab-pane>
            <el-tab-pane :label="`换货单详情(${exchangeData.length})`" name="second" class="tabpan">
              <template v-if="message === 'second'">
                <el-form :model="exchangeInfo" label-width="80px">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="换货原因:" prop="productName">
                        <el-input  style="width: 100%;border-top: none" v-model="exchangeInfo.excTheme" ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="是否维修:" prop="receivable" >
                      <el-select v-model="exchangeInfo.excHuanstate">
                        <el-option
                          v-for="state in StatusOptions"
                          :key="state.key"
                          :value="state.key"
                          :label="state.display_name"
                        />
                      </el-select>
                    </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                   <!-- <div class="bar" style="margin-bottom: 5px"></div>-->
                  </el-row>
                </el-form>
                <el-table
                  :data="exchangeData"
                  border
                  style="width: 100%"
                  ref="exchangeTable"
                >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="detPrid"
                    label="产品编号"
                    width="150">
                  </el-table-column>

                  <el-table-column
                    prop="prName"
                    label="产品名称"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="prsPrice"
                    label="订单售价"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="speColor"
                    label="型号"
                    width="300">
                  </el-table-column>
                  <el-table-column  label="数量" width="160" align="center">
                    <template slot-scope="s">
                      <el-input-number v-model="s.row.number"  :min="1" :max="s.row.exchangeState" size="small" @change="smallPrice(s.$index,s.row,1)"> </el-input-number>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="total"
                    label="总和">
                  </el-table-column>
                </el-table>

                <div class="handle-row">
                  <el-button type="primary" @click="withdrawEvent">撤回</el-button>
                  <el-button type="primary" @click="exchangeOk">保存</el-button>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane :label="`退货单详情(${ReturnProductDate.length})`" name="third" class="tabpan">
              <template v-if="message === 'third'">

                <el-form :model="ReturnProductInfo" label-width="80px">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="退货原因:" prop="productName">
                        <el-input  style="width: 100%;border-top: none" v-model="ReturnProductInfo.retuTheme" ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否维修:" prop="receivable" >
                        <el-select v-model="ReturnProductInfo.retuWeixiu">
                          <el-option
                            v-for="state in StatusOptions"
                            :key="state.key"
                            :value="state.key"
                            :label="state.display_name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="退货金额:" prop="productName">
                        <el-input  style="width: 100%;border-top: none" v-model="ReturnProductInfo.retuYprice" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- <div class="bar" style="margin-bottom: 5px"></div>-->
                  </el-row>
                </el-form>

                <el-table
                  :data="ReturnProductDate"
                  border
                  style="width: 100%"
                  ref="ReturnProductTable"
                >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="detPrid"
                    label="产品编号"
                    width="150">
                  </el-table-column>

                  <el-table-column
                    prop="prName"
                    label="产品名称"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="prsPrice"
                    label="订单售价"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="speColor"
                    label="型号"
                    width="300">
                  </el-table-column>
                  <el-table-column  label="数量" width="160" align="center">
                    <template slot-scope="s">
                      <el-input-number v-model="s.row.number"  :min="1" :max="s.row.exchangeState" size="small"  @change="smallPrice(s.$index,s.row,2)"></el-input-number>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="total"
                    label="总和">
                  </el-table-column>
                </el-table>
                <div class="handle-row">
                  <el-button type="primary" @click="withdrawEvt">撤回</el-button>
                  <el-button type="primary" @click="returnOk">保存</el-button>
                </div>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>

      <el-col :span="4">
        <div  class="right_sty">
          <el-row>
            <el-col :span="24">
              <div style="width:100%;height: 67px">
                <el-row class="header_sty">
                  <el-col :span="24">
                   <span><i class="el-icon-user">:</i></span> <span>{{cusName}}</span>
                  </el-col>
                </el-row>
                <el-row style="padding: 5px 0 0 10px">
                  <el-col :span="24">
                    <span><i class="el-icon-s-order">:</i></span>  <span>{{orderName}}</span>
                  </el-col>
                </el-row>
              </div>
            <!--  <h4 style="margin: 20px 20px 20px 20px"><span>{{cusName}}</span></h4>
              <h4 style="margin: 20px 20px 20px 20px"><span>{{orderName}}</span></h4>-->
              <div class="bar" style="margin-bottom: 10px"></div>
              <div class="second_sty">
                <el-row>
                  <el-col :span="22" :offset="1" v-for="(cons, index) in zfhuodanRecord" style="margin-bottom: 10px;cursor: pointer" :key="index">
                    <el-card  shadow="hover" :body-style="{ padding: '4px'}" :class="{'active' : index === rightIndex}" >
                      <div>
                        <div style="padding: 14px;"   @click="cardevent(cons,index)">
                          <el-row>
                            <el-col>
                              <span style="color: #20a0ff">{{cons.kauidGs}} {{cons.kauidHao |ellipsis }}</span>
                            </el-col>
                          </el-row>
                          <el-row>
                            <span style="">{{cons.shipmentsTime| formatDate}}</span>
                          </el-row>
                          <div style="border: 1px solid #42b983 ;width: 95%;margin-top: 10px;margin-bottom: 5px"></div>
                          <el-row>
                            <el-col :span="24"><span>￥{{cons.samoUnt}}</span></el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="8">
                              <span v-if="cons.shipmentsState==2">
                                <i class="el-icon-truck">换货</i>
                              </span>
                              <span v-if="cons.shipmentsState==3">
                                <i class="el-icon-sell">退货</i>
                              </span>
                            </el-col>
                            <el-col :span="16">
                              <i @click="excReTnfo(cons.excName)">{{cons.excName}}</i>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible">
      <el-form :model="exchangeInfo" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="换货主题:" prop="productName">
              <el-input  style="width: 100%" v-model="cusName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="换货主题:" prop="productName">
              <el-input  style="width: 100%" v-model="cusName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {formatTimeToStr} from '../assets/format'

  export default {
    name: 'Sareturnorder',
    data() {
      return {
        StatusOptions : [
          { key: '1', display_name: '需要维修' },
          { key: '0', display_name: '无需维修' }
        ],
        consdeliveryId:'',//指定交付id
        consfuodanid:'',//指定发货单
        rightIndex:0,
        houseList:[],
        styleObj1:{color:'blue'},
        demo:[],
        returnstate:true,//换货标识符
        exchangeState:true,//退货标识符
        orderName:'',//订单号
        cusName:'',
        zfhuodanRecord:[],//小界面的信息栏
        userName:'',
        productList:[],//原订单
        //换货单详情信息
        exchangeData:[],
        //退货单详情信息
        ReturnProductDate:[],
        dialogVisible:false,//换货保存

        //控制表格界面
        message: 'first',
        //换货
        exchangeInfo:{
          excId:'',
          excOrder:'',
          excTheme:'',
          excUserid:'',
          orderInfoByOrderId:{
            orderId:''
          },
          ecName:'',
          excAmount:'',
          excHuanstate:0,
          excCustomeid:'',
          excDeliveryid:'',
          exchangedetailsByExcId:''
        },
        //退货
        ReturnProductInfo:{
          retuName:'',//编号
          retuId:'',//表id
          retuOrder:'',//发货单
          retuTheme:'',//主题
          retuTata:'',//时间
          retuYprice:'',//应退
          retuSprice:'',//实退
          retuState:'',//状态
          retuUsertomid:'0',//操作人
          orderInfoByOrderId:{
            orderId:''
          },//订单
          returnorderdetailsByRetuId:'',//详情
          retuWeixiu:'',//维修
          retuDeliveryid:'',//交付
          retuCustomerid:'',//客户
        },
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },
        orderState:0,
      }
    },
    created :function() {
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
      this.userName=this.userInfo.empName;
      this.exchangeInfo.excUserid=this.userInfo.employeesId;
      this.ReturnProductInfo.retuUsertomid=this.userInfo.employeesId;
      this.exchangeInfo.excHuanstate = this.StatusOptions[0].key;
      this.ReturnProductInfo.retuWeixiu = this.StatusOptions[0].key;
      this.orderName=this.$route.query.orderCode;
      this.cusName=this.$route.query.cusName;
      this.exchangeInfo.excCustomeid=this.$route.query.customer;
      this.ReturnProductInfo.retuCustomerid=this.$route.query.customer;
      this.orderState=this.$route.query.orderState;
      this.zfhuodanEvent(this.$route.query.key);
    },
    methods: {
      excReTnfo(name){
        this.$router.push({
          path:'/order',
          query:{
            tainId:name
          }
        })
      },
      deliveryProductInfo(orderId,deliveyId){
        this.$axios.get("http://localhost:8088/zhidng_deliceryProduct",{params:{
          orderId:orderId,
            deliveyId:deliveyId
          }}).then(v=>{
            this.productList=v.data;
        }).catch()
      },

      //能否退换货
      exchangRretuInfo(state){
        if(state==1){
          this.returnstate=true,
            this.exchangeState=true
        }else{
          this.returnstate=false,
            this.exchangeState=false
        }
      },
      //切换发货单数据初始化
      dataInitialize(){
          this.productList=[],
          this.exchangeData=[],
          this.ReturnProductDate=[],
          this.returnstate=true,
          this.exchangeState=true,
          this.message='first'
      },
      //指定发货单下的产品
      cardevent(cons,index){
        this.dataInitialize();
        this.exchangRretuInfo(cons.shipmentsState);
        this.rightIndex = index;
        this.consdeliveryId=cons.sdeliveryId
        this.consfuodanid=  cons.shipmentsId;
        this.$message("指定订单"+cons.sorderId+"指定交付单"+cons.sdeliveryId);
        this.deliveryProductInfo(cons.sorderId,cons.sdeliveryId);
      },
      zfhuodanEvent(id){
        this.$axios.get("http://localhost:8088/zfhuodan_record",{params:{id:id}}).then(v=>{
          this.zfhuodanRecord=v.data;
        }).catch()
      },

      //产品计算小计
      smallPrice(index,row,falge){
        let price=0;//小计
        //售价*数量
        price=parseFloat(row.prsPrice).toFixed(2)*row.number;
        if(falge==1){
          this.exchangeData[index].total=price;//重新给小计赋值
        }
        if(falge==2){
          this.ReturnProductDate[index].total=price;//重新给小计赋值
          this.returnTotal();
        }

      },
      //换货总算
      total(){
        let tatalMoney=0;
        this.exchangeData.forEach((item,i)=>{
          tatalMoney=tatalMoney+item.total;
        })
        this.exchangeInfo.excAmount=tatalMoney;
      },
      //退货总算
      returnTotal(){
        let tatalMoney =0;
        this.ReturnProductDate.forEach((item,index)=>{
          tatalMoney=tatalMoney+item.total;
        })
        this.ReturnProductInfo.retuYprice=tatalMoney;

      },

      //退货数据格式调整
      returnorderKpl(){
        this.ReturnProductInfo.retuOrder=this.consfuodanid;
        this.ReturnProductInfo.orderInfoByOrderId.orderId=this.$route.query.key;//订单id
        this.ReturnProductInfo.retuDeliveryid=this.consdeliveryId;
        for(let i=0;i<this.ReturnProductDate.length;i++){
          let val = this.ReturnProductDate[i];
          this.$set(val,'rodProdcutid',this.ReturnProductDate[i].detPrid)//此处为重点
          this.$set(val,'rodNumber',this.ReturnProductDate[i].number)
        }
      },

      //换货数据格式调整
      kpl(){
        this.exchangeInfo.orderInfoByOrderId.orderId=this.$route.query.key;//订单id
        this.exchangeInfo.excOrder=this.consfuodanid;
        this.exchangeInfo.excDeliveryid=this.consdeliveryId;
        for(let i=0;i<this.exchangeData.length;i++){
          let val = this.exchangeData[i];
          this.$set(val,'excdProductid',this.exchangeData[i].detPrid)//此处为重点
          this.$set(val,'excdNumber',this.exchangeData[i].number)
        }
      },

      returnOk(){
        this.returnorderKpl();
        this.$axios.post("http://localhost:8088/save_returnorder",{
          retuOrder:this.ReturnProductInfo.retuOrder,
          retuTheme:this.ReturnProductInfo.retuTheme,
          retuYprice:this.ReturnProductInfo.retuYprice,
          orderInfoByOrderId:this.ReturnProductInfo.orderInfoByOrderId,
          returnorderdetailsByRetuId:this.ReturnProductDate,
          retuUsertomid:this.ReturnProductInfo.retuUsertomid,
          retuWeixiu:this.ReturnProductInfo.retuWeixiu,
          retuDeliveryid:this.ReturnProductInfo.retuDeliveryid,
          retuCustomerid:this.ReturnProductInfo.retuCustomerid
        }).then(v=>{

        }).catch()
      },

      exchangeOk(){
        this.$message("xx"+   this.exchangeInfo.excCustomeid);
        this.kpl();
        this.total();
        this.$axios.post("http://localhost:8088/save_exchang",{
          excDeliveryid:this.exchangeInfo.excDeliveryid,
          excAmount:this.exchangeInfo.excAmount,
          excId:this.exchangeInfo.excId,
          excOrder:this.exchangeInfo.excOrder,
          excTheme:this.exchangeInfo.excTheme,
          excUserid:this.exchangeInfo.excUserid,
          orderInfoByOrderId:this.exchangeInfo.orderInfoByOrderId,
          ecName:this.exchangeInfo.ecName,
          exchangedetailsByExcId:this.exchangeData,
          excHuanstate:this.exchangeInfo.excHuanstate,
          excCustomeid:this.exchangeInfo.excCustomeid
        }).then(v=>{}).valueOf()
      },
      //换货撤回
      withdrawEvent(){
        let index=0;
        if(this.$refs.exchangeTable.selection.length >0){
          this.$refs.exchangeTable.selection.forEach((item,i)=>{
            index=index++;
            this.exchangeData.splice(index,1)
            this.productList.splice(i,0,item)
          })
          this.message = 'first';
        }else if(this.$refs.exchangeTable.selection.length==0){
          this.$message.error("请先选中!")
        }
        if(this.exchangeData.length==0){
          this.exchangeState=true;
        }
      },
      //退货退货
      withdrawEvt(){
        this.ReturnProductInfo.retuYprice=0;
        let index=0;
        if(this.$refs.ReturnProductTable.selection.length>0){
          this.$refs.ReturnProductTable.selection.forEach((item,i)=>{
            index=index++;
            this.ReturnProductDate.splice(index,1)
            this.productList.splice(i,0,item)

          })
          this.message = 'first';
        }else if(this.$refs.ReturnProductTable.selection.length==0){
          this.$message.error("请先选中!")
        }
        if(this.ReturnProductDate.length==0){
          this.returnstate=true;
        }
      },
      //原订单
      /*initData(id){
        this.$axios.get("http://localhost:8088/details_products",
          {params:{orderId:id}}).then(v=>{
          this.productList=v.data;
        }).catch()
      },*/
      //组件自带可以删除
      handleClick(row) {
        console.log(row);
      },
      //换货
      exchange(){
        this.exchangeState=false;
        if(this.$refs.multipleTable.selection.length > 0){
          //整单换货
          this.$alert('是否继续操作', '此操作成功后会将订单信息全部转移到换货区', {
            confirmButtonText: '确定',
            callback: action => {
              //清空订单详情信息转移到换货区
              let index=0;
              this.$refs.multipleTable.selection.forEach((item,i)=>{
                index=index++;
                this.exchangeData.splice(i,0,item);
                this.$set(this.exchangeData[i],'number',1);
                this.$set(this.exchangeData[i],'total',this.exchangeData[i].prsPrice);
                this.productList.splice(index,1);
              })
              this.message='second';
            }
          });
        }else if(this.$refs.multipleTable.selection.length == 0){
          this.$message.error("请先选中!")
        }

      },
      //退货
      returnGoods(){
        this.returnstate=false;
        //整单退货
        if(this.$refs.multipleTable.selection.length > 0){
          this.$alert('是否继续操作', '此操作成功后会将订单信息全部转移到退货区', {
            confirmButtonText: '确定',
            callback: action => {
              //清空订单详情信息转移到换货区
              let index=0;
              this.$refs.multipleTable.selection.forEach((item,i)=>{
                index=index++;
                this.ReturnProductDate.splice(i,0,item);
                this.$set(this.ReturnProductDate[i],'number',1);
                this.$set(this.ReturnProductDate[i],'total',this.ReturnProductDate[i].prsPrice);
                this.productList.splice(index,1);

              });
              this.returnTotal();
              this.message='third';
            }
          });
        }else if(this.$refs.multipleTable.selection.length == 0){
          this.$message.error("请先选中!")
        }

      },
    },
    computed: {
      unreadNum(){
        return this.unread.length;
      }
    },
    watch:{
      /*'exchangeData':function(exchangeData){
        if (this.exchangeData.length = 0) {
          this.$message("ok");
          this.exchangeState = true;
        }
      }*/
      /*exchangeEvent() {
        if (this.$refs.exchangeTable.selection.length = 0) {
          this.exchangeState = true;
        }
      }*/
    },
    filters: {// 日期格式化
      formatDate: function (time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      },
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 8) {
          return value.slice(0,8) + '...'
        }
        return value
      }
    },
  }

</script>

<style>
  .tabpan{
   height: 395px;
  }
  .houseTitle{
    font-size: 22px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .active{
    border: 2px solid #20a0ff;

  }


  .header_sty{
    padding: 10px 10px 3px 10px
  }
  .bar{
    border: 1px solid #20a0ff;
    width: 98%;
    margin: 0 auto
  }

  .second_sty{
    min-height: 414px;
    max-height: 414px;
    overflow-y: auto;
  }
  .right_sty{
    border:1px solid #ffffff ;
    border-radius: 4px;
    width:100%;
    border:1px solid #BFBFBF;
    background-color: white;
    box-shadow:#ccc 0px 0px 10px;
    max-height: 530px;
    min-height: 530px;
  }
  .div_sty{
    background-color: #E9EEF3;
    border-radius: 2px;
  }
  .container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 93%;
  }
  .message-title{
    cursor: pointer;
  }
  .handle-row{
    margin-top: 30px;
  }
</style>

